<template>
	<view class="main-order">
		<view class="order-title">
			<view class="title-first">
				<strong>{{choiceName}}：{{num}}</strong>
			</view>
			<view class="title-second" @click="getOrder('0')">
				<strong> 查看全部订单>></strong>
			</view>
		</view>
		<view class="order-centent">
			<view class="centent-first">
				<view @click="getOrder('1')" :class="{'orderColor':choiceValue == '1'}"><image src="../../static/icon/icon-sm.png"></image>未确定订单</view>
				<view @click="getOrder('2')" :class="{'orderColor':choiceValue == '2'}"><image src="../../static/icon/icon-sm.png"></image>未签订合同</view>
				<view @click="getOrder('3')" :class="{'orderColor':choiceValue == '3'}"><image src="../../static/icon/icon-sm.png"></image>未付款订单</view>
			</view>
			<view class="centent-first">
				<view @click="getOrder('4')" :class="{'orderColor':choiceValue == '4'}"><image src="../../static/icon/icon-sm.png"></image>托运中订单</view>
				<view @click="getOrder('5')" :class="{'orderColor':choiceValue == '5'}"><image src="../../static/icon/icon-sm.png"></image>订单已送达</view>
				<view @click="getOrder('6')" :class="{'orderColor':choiceValue == '6'}"><image src="../../static/icon/icon-sm.png"></image>订单已签收</view>
			</view>
			
			<view class="centent-second">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				choiceValue: 1, // 选择搜索的值
				choiceName: "未确认订单数",
				num: 0
			}
		},
		methods:{
			getOrder(num) {
				this.choiceValue = num;
				var tem = num;
				switch(tem){
					case '0':
					    this.choiceName = "总订单数";
					    break;
				    case '1':
				        this.choiceName = "未确认订单数";
				        break;
				    case '2':
				        this.choiceName = "未签订合同订单数";
				        break;
					case '3':
					    this.choiceName = "未付款订单数";
					    break;
					case '4':
					    this.choiceName = "托运中订单数";
					    break;
					case '5':
					    this.choiceName = "订单已送达数";
					    break;
				    default:
				        this.choiceName = "订单已签收数";
				}    
			}
		}
	}
</script>

<style lang="scss">
	.main-order{
		
		margin: 0;
		background-color: #ffffff;
		.order-title{
			margin: 50upx auto 0;
			display: flex;
			flex-direction: row;
			text-align: center;
			font-size: 35upx;
			padding-bottom: 20upx;
			border-bottom: 1px solid #bdbdbd;
			
			.title-first{
				width: 50%;
			}
			.second{
				width: 50%;
			}
		}
		.order-centent{
			padding-bottom: 30upx;
			.centent-first{
				display: flex;
				flex-direction: row;
				text-align: center;
				view{
					margin: 10upx auto 0;
					font-size: 32upx;
					color: #8a8a8a;
					image{
						width: 40upx;
						height: 40upx;
						top: 12upx;
						right: 5upx;
					}
				}
				.orderColor{
					color: #00aaff;
				}
			}
			.centent-second{
				margin: auto;
			}
		}
	}
</style>
